<template>
	<view :class="[primarySize()]">
		<view class="container">
			
			<view class="pb30">
				<view class="plr30 pt20">
					<template>
						<navigator :url="'/pages/user/post_info?id='+item.job_id" class="business_item"
							v-for="(item,index) in list" hover-class="none">
							<view class="recom_info">
								<view class="flex-box">
									<view class="business_img">
										<image
											:src="cdnurl(item.enterpriseinfo.logo)||'/static/public/business_logo.png'">
										</image>
									</view>
									<view class="flex-grow-1 business_info">
										<view class="flex-box">
											<view class="fs32 col0 fd flex-grow-1 m-ellipsis pr30">{{item.job.job_name}}
											</view>
											<view>{{formatDatetime(item.created_at,'mm月dd日')}}</view>
										</view>
										<view class="flex-box">
											<view class="flex-grow-1">
												<view class="ptb10">{{item.job.city.shortname}} ｜
													{{item.enterpriseinfo.full_name}}
												</view>
												<view class="price">{{item.job.salary_text}}</view>
											</view>
										</view>

									</view>
								</view>
							</view>
						</navigator>
						<view class="nothing" v-if="listMore.nothing">
							<image src="@/static/public/icon_nothing.png" mode="aspectFill"></image>
							<text>抱歉，暂无相关信息</text>
						</view>
						<button @click="fetch" v-else hover-class="none"
							class="more_btn mt30">{{listMore.text}}</button>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				job_type: 0,
				list: [],
				listMore: {
					page: 1
				},
				query: {},

			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad() {
			this.fetch()
		},
		onReachBottom() {
			this.fetch()
		},
		methods: {
			fetch() {
				this.$util.fetch(this, 'xilujob.job_apply/apply_list', {}, 'listMore', 'list', '');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.pt88 {
		padding-top: 88rpx;
	}

	.page-head {
		height: 88rpx;
		background: var(--primary);

		.tab_item {
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 26rpx;
			color: #FFFFFF;

			&.active {
				font-weight: bold;
				font-size: 26rpx;
				color: #FFFFFF;
				position: relative;

				&::after {
					content: '';
					width: 36rpx;
					height: 6rpx;
					background: #FFFFFF;
					border-radius: 4rpx;
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}
	}

	.business_item {
		box-shadow: 0px 1px 18px 0px rgba(0, 0, 0, 0.06);
		background-color: #fff;
		border-radius: 4rpx;
		border: 1rpx solid #EBEBEB;
		padding: 35rpx 30rpx 10rpx;
		position: relative;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.business_img {
		width: 80rpx;
		height: 80rpx;
		margin-right: 32rpx;
		margin-left: 20rpx;
	}

	.business_img image {
		width: 100%;
		height: 100%;
		display: block
	}

	.business_info {
		font-size: 24rpx;
		color: #333
	}

	.cancel_star {
		font-size: 20rpx;
		color: #999;
		line-height: 39rpx;
		height: 39rpx;
		border-radius: 8rpx;
		border: 1rpx solid #E1E1E1;
		padding: 0 15rpx;
		float: left;
		margin-bottom: 13rpx;
		margin-right: 26rpx;
	}

	.star_type {
		float: left;
		font-size: 20rpx;
		color: #999;
		border-radius: 8rpx;
		line-height: 39rpx;
		height: 39rpx;
		padding: 0 17rpx;
		background-color: #F7F7F7;
		border: 1rpx solid #F7F7F7;
		margin-right: 13rpx;
		margin-bottom: 13rpx;
	}

	.price {
		font-size: 28rpx;
		color: var(--primary);
		font-weight: bold
	}

	.refuse_btn {
		color: #999999;
		border: 1rpx solid #999999;
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.agree_btn {
		color: var(--primary);
		border: 1rpx solid var(--primary);
		font-size: 24rpx;
		padding: 0 24rpx;
		border-radius: 8rpx;
		height: 44rpx;
		line-height: 42rpx;
	}

	.recom_info {
		padding-bottom: 35rpx;
	}

	.btn1 {
		height: 82rpx;
		line-height: 82rpx;
		font-size: 30rpx;
	}
</style>